@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Custom scrollbar for a better dark mode experience */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a; /* slate-900 */
}

::-webkit-scrollbar-thumb {
    background: #334155; /* slate-700 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569; /* slate-600 */
}

/* Loading spinner animation */
.loader {
    border: 4px solid #334155; /* slate-700 */
    border-top: 4px solid #6366f1; /* indigo-500 */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ensure audio controls match the dark theme */
audio::-webkit-media-controls-panel {
    background-color: #1e293b; /* slate-800 */
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button {
    background-color: #6366f1; /* indigo-500 */
    border-radius: 50%;
}

audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider {
    background-color: #475569; /* slate-600 */
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 10px;
}
